<#include "/client/config.ftl"/>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="${base}/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${base}/css/common.css" />
		<script type="text/javascript" src="${base}/js/jquery-1.12.0.min.js"></script>
		<script type="text/javascript" src="${base}/js/bootstrap.2.0.min.js"></script>
		<script type="text/javascript" src="${base}/js/jquery.bootstrap.wizard.js"></script>

	</head>

	<body>
		<div class="container-fluid">
			<div id="rootwizard">
				<div class="navbar hidden_area">
					<div class="navbar-inner">
						<div class="container">
							<ul>
								<li><a href="#tab1" data-toggle="tab"></a></li>
								<li><a href="#tab2" data-toggle="tab"></a></li>
								<li><a href="#tab3" data-toggle="tab"></a></li>
								<li><a href="#tab4" data-toggle="tab"></a></li>
								<li><a href="#tab5" data-toggle="tab"></a></li>
								<li><a href="#tab6" data-toggle="tab"></a></li>
								<li><a href="#tab7" data-toggle="tab"></a></li>
								<li><a href="#tab8" data-toggle="tab"></a></li>
							</ul>
						</div>
					</div>
				</div>
				<form action="${base}/client/task/addReaction" id="form" method="post">
					<div class="tab-content">
						<div class="tab-pane" id="tab1">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">1、便秘</span>
									<span class="rea_img"><img src="${base}/image/ex.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notConstipation" checked />无
										<input type="radio" name="notConstipation" />有，情况是：
										<input type="text" class="form-control" name="isConstipation" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab2">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">2、恶心、呕吐</span>
									<span class="rea_img"><img src="${base}/image/ot.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notNausea" checked />无
										<input type="radio" name="notNausea" />有，情况是：
										<input type="text" class="form-control" name="isNausea" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab3">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">3、嗜睡</span>
									<span class="rea_img"><img src="${base}/image/ss.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notSleep" checked />无
										<input type="radio" name="notSleep" />有，情况是：
										<input type="text" class="form-control" name="isSleep" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab4">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">4、眩晕</span>
									<span class="rea_img"><img src="${base}/image/yx.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notStun" checked />无
										<input type="radio" name="notStun" />有，情况是：
										<input type="text" class="form-control" name="isStun" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab5">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">5、尿储留</span>
									<span class="rea_img"><img src="${base}/image/cl.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notUrine" checked />无
										<input type="radio" name="notUrine" />有，情况是：
										<input type="text" class="form-control" name="isUrine" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab6">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">6、肠梗阻</span>
									<span class="rea_img"><img src="${base}/image/gs.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notBowel" checked />无
										<input type="radio" name="notBowel" />有，情况是：
										<input type="text" class="form-control" name="isBowel" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab7">
							<div class="list_each">
								<h1>服用止痛药后您是否有一下不良反应？</h1>
								<div class="item_reaction">
									<span class="title">7、皮肤瘙痒</span>
									<span class="rea_img"><img src="${base}/image/sy.png"/></span>
									<span class="rea_qa">
										<input type="radio" name="notTickle" checked />无
										<input type="radio" name="notTickle" />有，情况是：
										<input type="text" class="form-control" name="isTickle" />
									</span>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab8">
							<div class="list_each">
								<div class="item_reaction">
									<ul>
										<li class="list_each">
											<div class="item">
												<span class="key">其他情况：</span>
												<span class="value">
													<input type="text" class="form-control" name="other" />
												</span>
											</div>
										</li>
										<li class="list_each">
											<div class="item">
												<span class="key">处理方法：</span>
												<span class="value">
													<input type="text" class="form-control" name="deal" />
												</span>
											</div>
										</li>
										<li class="list_each">
											<div class="item">
												<span class="key">效果如何：</span>
												<span class="value">
													<input type="radio" value="1" name="result" />好
													<input type="radio" value="0" name="result" />不好
												</span>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<ul class="pager wizard">
							<div class="hidden_area">
								<input type="hidden" name="tsId" value="${task.tsId}">
							</div>
							<li class="previous"><a href="#">上一步</a></li>
							<li class="next"><a href="#">下一步</a></li>
							<li class="next finish" style="display:none;"><a href="javascript:;">确认</a></li>
						</ul>
					</div>
				</form>
			</div>
		</div>

		<script>
			$(document).ready(function() {
				$('#rootwizard').bootstrapWizard({
					onTabShow: function(tab, navigation, index) {
						var $total = navigation.find('li').length;
						var $current = index + 1;
						// If it's the last tab then hide the last button and show the finish instead
						if ($current >= $total) {
							$('#rootwizard').find('.pager .next').hide();
							$('#rootwizard').find('.pager .finish').show();
							$('#rootwizard').find('.pager .finish').removeClass('disabled');
						} else {
							$('#rootwizard').find('.pager .next').show();
							$('#rootwizard').find('.pager .finish').hide();
						}
					}
				});
				$('#rootwizard .finish').click(function() {
					$("#form").submit();
				});
			});
		</script>

	</body>

</html>